<!--
 * @Author: lmk
 * @Date: 2021-11-26 17:04:40
 * @LastEditTime: 2021-12-15 02:23:23
 * @LastEditors: lmk
 * @Description: 
-->
<template>
	<view class="viewSpaceBetween">
		<view class="column" :style="{'width':columnWidth+'%'}" v-for="(itemTab,indexTab) in tabList"
			v-bind:key="indexTab">
			<view class="ticket-box" v-for="(item,index) in itemTab" v-bind:key="index">
				<item-box :padding="20">
					<view class="u-padding-top-10 u-padding-bottom-10">
						<item-image :img="item.image" width="293" :height="227" :radius="12"
							@click.native="previewBanner(item.image)" />
						<view class="u-padding-top-18 u-font-32 box-title text-bold u-line-2 u-margin-bottom-14">{{item.name}}</view>
						<view class="u-flex">
							<text class="u-font-24 text-order-time">剧烈运动价：</text>
							<money :price="item.exhibitPrice" size="36"  color="#765CFE"></money>
						</view>
						<view class="u-margin-bottom-10 u-font-24 box-title">售价：￥{{item.price || 0}}</view>
						<view class="u-font-26 content-desc-item u-margin-bottom-10">销量：{{item.sales || 0}}</view>
						<item-btn @click="goBuy(item)" height="78" width="100%">{{item.depositPrice ? '付定金': '购买'}}</item-btn>
					</view>
				</item-box>
			</view>
		</view>
		<!--下段代码是预加载，渲染出来后遍能读取到组件的属性了，然后进行排版
		 想要代码简单且通用，就需要牺牲一些东西-->
		<scroll-view style="height: 0rpx;">
			<view class="ticket-box" :id="'child'+index" v-for="(item,index) in list" v-bind:key="index">
				<item-box :padding="20">
					<view class="u-padding-top-10 u-padding-bottom-10">
						<item-image :img="item.image" width="293" :height="227" :radius="12"
							@click.native="previewBanner(item.image)" />
						<view class="u-padding-top-18 u-font-32 box-title text-bold u-line-2 u-margin-bottom-14">{{item.name}}</view>
						<view class="u-flex">
							<text class="u-font-24 text-order-time">剧烈运动价：</text>
							<money :price="item.exhibitPrice" size="36"  color="#765CFE"></money>
						</view>
						<view class="u-margin-bottom-10 u-font-24 box-title">售价：￥{{item.price || 0}}</view>
						<view class="u-font-26 content-desc-item u-margin-bottom-10">销量：{{item.sales || 0}}</view>
						<item-btn @click="goBuy(item)" height="78" width="100%">{{item.depositPrice ? '付定金': '购买'}}</item-btn>
					</view>
				</item-box>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import flowLayout from '@/mixins/eiml-flow-layout.js'
	import money from '@/components/money/money.vue'
	export default {
		mixins: [flowLayout],
	}
</script>

<style lang="scss" scoped>
	.viewSpaceBetween {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		align-items: flex-start;
		padding: 0 32rpx;
	}
	.column {
		flex-grow: 1;
	}
	.ticket-box{
		padding: 10rpx;
	}
</style>
